<script>
import ImageComponent from "@/components/ImageComponent.vue";
import { saveDataApi, searchDataApi } from "@/api/index.js";
import ImageUploadComponent from "@/components/ImageUploadComponent.vue";

export default {
  name: "HomeView",
  components: { ImageUploadComponent, ImageComponent },
  data() {
    return {
      tableData: [],
      queryData: {
        title: ""
      },
      dialogVisible: false,
      loading: false,
      tableLoading: false,
      formData: {
        title: "",
        image1: "",
        image2: "",
        remark: "",
        id: ""
      },
      rules: {
        title: [{ required: true, message: "请填写标题", trigger: "blur" }],
        image1: [{ required: true, message: "请上传图片1" }],
        image2: [{ required: true, message: "请上传图片2" }]
      }
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      this.tableLoading = true;
      this.tableData = [];
      searchDataApi(this.queryData).then(res => {
        this.tableData = res;
        this.tableLoading = false;
      }).catch(() => {
        this.tableLoading = false;
      });
    },
    add() {
      this.formData.id = "";
      this.formData.title = "";
      this.formData.remark = "";
      this.formData.image1 = "";
      this.formData.image2 = "";
      this.dialogVisible = true;
    },
    deleteOne(index) {
      this.tableData.splice(index, 1);
    },
    editOne(row) {
      this.formData.id = row.id;
      this.formData.title = row.title;
      this.formData.remark = row.remark;
      this.formData.image1 = row.image1;
      this.formData.image2 = row.image2;
      this.dialogVisible = true;
    },
    submit() {
      this.$refs.formRef.validate(isValid => {
        if (isValid) {
          this.loading = true;
          saveDataApi(this.formData).then(() => {
            this.$notify.success("保存成功！");
            this.dialogVisible = false;
            this.loading = false;
            this.search();
          }).catch(err => {
            console.log(err);
            this.loading = false;
          });
        }
      });
    }
  }
};
</script>

<template>
  <div style="padding: 20px">
    <div>
      <el-form inline>
        <el-form-item label="标题">
          <el-input v-model="queryData.title" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="add">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="tableLoading" :data="tableData" border>
      <el-table-column label="序号" type="index" width="65"></el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="图片1" prop="image1">
        <template #default="scope">
          <image-component :src="scope.row.image1"></image-component>
        </template>
      </el-table-column>
      <el-table-column label="图片2" prop="image2">
        <template #default="scope">
          <image-component :src="scope.row.image2"></image-component>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
      <el-table-column label="修改时间" prop="update_time"></el-table-column>
      <el-table-column label="操作" prop="" min-width="100">
        <template #default="scope">
          <el-button type="primary" @click="editOne(scope.row)">修改</el-button>
          <el-button type="danger" @click="deleteOne(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="添加数据" destroy-on-close>
      <el-form ref="formRef" :model="formData" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="图片1" prop="image1">
          <image-upload-component ref="image1Ref" @upload="({fileName}) => formData.image1 = fileName"
                                  :src="formData.image1"></image-upload-component>
        </el-form-item>
        <el-form-item label="图片2" prop="image2">
          <image-upload-component ref="image2Ref" @upload="({fileName}) => formData.image2 = fileName"
                                  :src="formData.image2"></image-upload-component>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button :loading="loading" type="primary" @click="submit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>
